<template>
  <!-- <div class="content-box">
  <common-header :title="title" :showleft="true"></common-header>-->
  <div class="page-content">
    <div class="cell">
      <!-- <van-skeleton :row="3" style="background:#fff" v-if="isshow" /> -->
      <cellList :titleList="titleList" />
    </div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>

<script>
import { newsApi } from "@/api";
import { commonFooter, cellList } from "common";
export default {
  watch: {
    $route: {
      handler(to, from) {
        if (from.name == "aboutus") {
          this.getList();
        }
        console.log(this.$route.params);
      }
    }
  },
  data() {
    return {
      title: "帮助中心",
      isshow: true,
      titleList: []
    };
  },
  components: {
    commonFooter,
    cellList
  },
  mounted() {
    this.getList();
    if (!this.$route.params.id) {
      this.$router.replace("/aboutus");
    }
  },
  methods: {
    getList() {
      newsApi({ pid: this.$route.params.id||0}).then(res => {
        if (res.code == 200) {
          this.titleList = res.data;
          this.isshow = false;
        }
        if(!res.data.length){
          this.$router.replace("/aboutus");
        }
      });
    }
  },
  computed: {}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
.page-content {
  .mb(98);
}
.cell {
  // margin: 0.5rem 0.2rem;
  /deep/ li {
    border-bottom: 1px solid #eee;
  }
}

/deep/ .van-skeleton__row {
  margin: 12px;
  height: 32px;
  width: calc(100% - 24px) !important;
}
</style>
